﻿@page "/tests/misc-forms"
<Row>
    <Column ColumnSize="ColumnSize.IsHalf">
        <Card Margin="Margin.Is4.FromTop">
            <CardHeader>
                <CardTitle>TextEdit Sizes</CardTitle>
            </CardHeader>
            <CardBody>
                <Field Horizontal>
                    <FieldLabel ColumnSize="ColumnSize.Is3">Extra Small</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is9">
                        <TextEdit Size="Size.ExtraSmall" Placeholder=".extra small" />
                    </FieldBody>
                </Field>
                <Field Horizontal>
                    <FieldLabel ColumnSize="ColumnSize.Is3">Small</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is9">
                        <TextEdit Size="Size.Small" Placeholder=".small" />
                    </FieldBody>
                </Field>
                <Field Horizontal>
                    <FieldLabel ColumnSize="ColumnSize.Is3">Normal</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is9">
                        <TextEdit Placeholder="Normal" />
                    </FieldBody>
                </Field>
                <Field Horizontal>
                    <FieldLabel ColumnSize="ColumnSize.Is3">Medium</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is9">
                        <TextEdit Size="Size.Medium" Placeholder=".medium" />
                    </FieldBody>
                </Field>
                <Field Horizontal>
                    <FieldLabel ColumnSize="ColumnSize.Is3">Large</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is9">
                        <TextEdit Size="Size.Large" Placeholder=".large" />
                    </FieldBody>
                </Field>
                <Field Horizontal>
                    <FieldLabel ColumnSize="ColumnSize.Is3">Extra Large</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is9">
                        <TextEdit Size="Size.ExtraLarge" Placeholder=".extra large" />
                    </FieldBody>
                </Field>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.IsHalf">
        <Card Margin="Margin.Is4.FromTop">
            <CardHeader>
                <CardTitle>Select Sizes</CardTitle>
            </CardHeader>
            <CardBody>
                <Field Horizontal>
                    <FieldLabel ColumnSize="ColumnSize.Is3">Extra Small</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is9">
                        <Select TValue="string" Size="Size.ExtraSmall">
                            <SelectItem Value="@("1")">Value 1</SelectItem>
                            <SelectItem Value="@("2")">Value 2</SelectItem>
                            <SelectItem Value="@("3")">Value 3</SelectItem>
                        </Select>
                    </FieldBody>
                </Field>
                <Field Horizontal>
                    <FieldLabel ColumnSize="ColumnSize.Is3">Small</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is9">
                        <Select TValue="string" Size="Size.Small">
                            <SelectItem Value="@("1")">Value 1</SelectItem>
                            <SelectItem Value="@("2")">Value 2</SelectItem>
                            <SelectItem Value="@("3")">Value 3</SelectItem>
                        </Select>
                    </FieldBody>
                </Field>
                <Field Horizontal>
                    <FieldLabel ColumnSize="ColumnSize.Is3">Normal</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is9">
                        <Select TValue="string">
                            <SelectItem Value="@("1")">Value 1</SelectItem>
                            <SelectItem Value="@("2")">Value 2</SelectItem>
                            <SelectItem Value="@("3")">Value 3</SelectItem>
                        </Select>
                    </FieldBody>
                </Field>
                <Field Horizontal>
                    <FieldLabel ColumnSize="ColumnSize.Is3">Medium</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is9">
                        <Select TValue="string" Size="Size.Medium">
                            <SelectItem Value="@("1")">Value 1</SelectItem>
                            <SelectItem Value="@("2")">Value 2</SelectItem>
                            <SelectItem Value="@("3")">Value 3</SelectItem>
                        </Select>
                    </FieldBody>
                </Field>
                <Field Horizontal>
                    <FieldLabel ColumnSize="ColumnSize.Is3">Large</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is9">
                        <Select TValue="string" Size="Size.Large">
                            <SelectItem Value="@("1")">Value 1</SelectItem>
                            <SelectItem Value="@("2")">Value 2</SelectItem>
                            <SelectItem Value="@("3")">Value 3</SelectItem>
                        </Select>
                    </FieldBody>
                </Field>
                <Field Horizontal>
                    <FieldLabel ColumnSize="ColumnSize.Is3">Extra Large</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is9">
                        <Select TValue="string" Size="Size.ExtraLarge">
                            <SelectItem Value="@("1")">Value 1</SelectItem>
                            <SelectItem Value="@("2")">Value 2</SelectItem>
                            <SelectItem Value="@("3")">Value 3</SelectItem>
                        </Select>
                    </FieldBody>
                </Field>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column ColumnSize="ColumnSize.IsHalf">
        <Card Margin="Margin.Is4.FromTop">
            <CardHeader>
                <CardTitle>NumericEdit Sizes</CardTitle>
            </CardHeader>
            <CardBody>
                <Field Horizontal>
                    <FieldLabel ColumnSize="ColumnSize.Is3">Extra Small</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is9">
                        <NumericEdit TValue="decimal" Size="Size.ExtraSmall" Placeholder=".extra small" />
                    </FieldBody>
                </Field>
                <Field Horizontal>
                    <FieldLabel ColumnSize="ColumnSize.Is3">Small</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is9">
                        <NumericEdit TValue="decimal" Size="Size.Small" Placeholder=".small" />
                    </FieldBody>
                </Field>
                <Field Horizontal>
                    <FieldLabel ColumnSize="ColumnSize.Is3">Normal</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is9">
                        <NumericEdit TValue="decimal" Placeholder="Normal" />
                    </FieldBody>
                </Field>
                <Field Horizontal>
                    <FieldLabel ColumnSize="ColumnSize.Is3">Medium</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is9">
                        <NumericEdit TValue="decimal" Size="Size.Medium" Placeholder=".medium" />
                    </FieldBody>
                </Field>
                <Field Horizontal>
                    <FieldLabel ColumnSize="ColumnSize.Is3">Large</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is9">
                        <NumericEdit TValue="decimal" Size="Size.Large" Placeholder=".large" />
                    </FieldBody>
                </Field>
                <Field Horizontal>
                    <FieldLabel ColumnSize="ColumnSize.Is3">Extra Large</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is9">
                        <NumericEdit TValue="decimal" Size="Size.ExtraLarge" Placeholder=".extra large" />
                    </FieldBody>
                </Field>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.IsHalf">
        <Card Margin="Margin.Is4.FromTop">
            <CardHeader>
                <CardTitle>DateEdit Sizes</CardTitle>
            </CardHeader>
            <CardBody>
                <Field Horizontal>
                    <FieldLabel ColumnSize="ColumnSize.Is3">Extra Small</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is9">
                        <DateEdit TValue="DateTime?" Size="Size.ExtraSmall" Placeholder=".extra small" />
                    </FieldBody>
                </Field>
                <Field Horizontal>
                    <FieldLabel ColumnSize="ColumnSize.Is3">Small</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is9">
                        <DateEdit TValue="DateTime?" Size="Size.Small" Placeholder=".small" />
                    </FieldBody>
                </Field>
                <Field Horizontal>
                    <FieldLabel ColumnSize="ColumnSize.Is3">Normal</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is9">
                        <DateEdit TValue="DateTime?" Placeholder="Normal" />
                    </FieldBody>
                </Field>
                <Field Horizontal>
                    <FieldLabel ColumnSize="ColumnSize.Is3">Medium</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is9">
                        <DateEdit TValue="DateTime?" Size="Size.Medium" Placeholder=".medium" />
                    </FieldBody>
                </Field>
                <Field Horizontal>
                    <FieldLabel ColumnSize="ColumnSize.Is3">Large</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is9">
                        <DateEdit TValue="DateTime?" Size="Size.Large" Placeholder=".large" />
                    </FieldBody>
                </Field>
                <Field Horizontal>
                    <FieldLabel ColumnSize="ColumnSize.Is3">Extra Large</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is9">
                        <DateEdit TValue="DateTime?" Size="Size.ExtraLarge" Placeholder=".extra large" />
                    </FieldBody>
                </Field>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column>
        <Card Margin="Margin.Is4.FromTop">
            <CardHeader>
                <CardTitle>Switch</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>
                    Display the classic checkbox as a switch button with different colors, sizes, and states
                </CardText>
            </CardBody>
            <CardBody>
                <Switch TValue="bool" Color="Color.Primary">Primary</Switch>
                <Switch TValue="bool" Color="Color.Secondary">Secondary</Switch>
                <Switch TValue="bool" Color="Color.Success">Success</Switch>
                <Switch TValue="bool" Color="Color.Danger">Danger</Switch>
                <Switch TValue="bool" Color="Color.Warning">Warning</Switch>
                <Switch TValue="bool" Color="Color.Info">Info</Switch>
                <Switch TValue="bool" Color="Color.Light">Light</Switch>
                <Switch TValue="bool" Color="Color.Dark">Dark</Switch>
                <Switch TValue="bool" Color="Color.Link">Link</Switch>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column>
        <Card Margin="Margin.Is4.FromTop">
            <CardHeader>
                <CardTitle>Switch Sizes</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>
                    Different sizes
                </CardText>
            </CardBody>
            <CardBody>
                <Switch TValue="bool" Size="Size.ExtraSmall">Extra Small</Switch>
                <Switch TValue="bool" Size="Size.Small">Small</Switch>
                <Switch TValue="bool" Size="Size.Default">None (default)</Switch>
                <Switch TValue="bool" Size="Size.Medium">Medium</Switch>
                <Switch TValue="bool" Size="Size.Large">Large</Switch>
                <Switch TValue="bool" Size="Size.ExtraLarge">Extra Large</Switch>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column>
        <Card Margin="Margin.Is4.FromTop">
            <CardHeader>
                <CardTitle>Check Sizes</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>
                    Different sizes
                </CardText>
            </CardBody>
            <CardBody>
                <Check TValue="bool" Size="Size.ExtraSmall">Extra Small</Check>
                <Check TValue="bool" Size="Size.Small">Small</Check>
                <Check TValue="bool" Size="Size.Default">None (default)</Check>
                <Check TValue="bool" Size="Size.Medium">Medium</Check>
                <Check TValue="bool" Size="Size.Large">Large</Check>
                <Check TValue="bool" Size="Size.ExtraLarge">Extra Large</Check>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column>
        <Card Margin="Margin.Is4.FromTop">
            <CardHeader>
                <CardTitle>Radio Sizes</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>
                    Different sizes
                </CardText>
            </CardBody>
            <CardBody>
                <RadioGroup TValue="string">
                    <Radio Value="@("1")" Size="Size.ExtraSmall">Extra Small</Radio>
                    <Radio Value="@("2")" Size="Size.Small">Small</Radio>
                    <Radio Value="@("3")" Size="Size.Default">None (default)</Radio>
                    <Radio Value="@("4")" Size="Size.Medium">Medium</Radio>
                    <Radio Value="@("5")" Size="Size.Large">Large</Radio>
                    <Radio Value="@("6")" Size="Size.ExtraLarge">Extra Large</Radio>
                </RadioGroup>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column ColumnSize="ColumnSize.IsHalf">
        <Card Margin="Margin.Is4.FromTop">
            <CardHeader>
                <CardTitle>Addons sizes with NumericEdit</CardTitle>
            </CardHeader>
            <CardBody>
                <Field Horizontal>
                    <FieldLabel ColumnSize="ColumnSize.Is3">Extra Small</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is9">
                        <Addons Size="Size.ExtraSmall">
                            <Addon AddonType="AddonType.Start">
                                <Button Color="Color.Primary">
                                    <Icon Name="IconName.ChevronLeft" />
                                </Button>
                            </Addon>
                            <Addon AddonType="AddonType.Body">
                                <NumericEdit TValue="decimal?" />
                            </Addon>
                            <Addon AddonType="AddonType.End">
                                <AddonLabel>hours</AddonLabel>
                            </Addon>
                            <Addon AddonType="AddonType.End">
                                <Button Color="Color.Primary">
                                    <Icon Name="IconName.ChevronRight" />
                                </Button>
                            </Addon>
                        </Addons>
                    </FieldBody>
                </Field>
                <Field Horizontal>
                    <FieldLabel ColumnSize="ColumnSize.Is3">Small</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is9">
                        <Addons Size="Size.Small">
                            <Addon AddonType="AddonType.Start">
                                <Button Color="Color.Primary">
                                    <Icon Name="IconName.ChevronLeft" />
                                </Button>
                            </Addon>
                            <Addon AddonType="AddonType.Body">
                                <NumericEdit TValue="decimal?" />
                            </Addon>
                            <Addon AddonType="AddonType.End">
                                <AddonLabel>hours</AddonLabel>
                            </Addon>
                            <Addon AddonType="AddonType.End">
                                <Button Color="Color.Primary">
                                    <Icon Name="IconName.ChevronRight" />
                                </Button>
                            </Addon>
                        </Addons>
                    </FieldBody>
                </Field>
                <Field Horizontal>
                    <FieldLabel ColumnSize="ColumnSize.Is3">Normal</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is9">
                        <Addons>
                            <Addon AddonType="AddonType.Start">
                                <Button Color="Color.Primary">
                                    <Icon Name="IconName.ChevronLeft" />
                                </Button>
                            </Addon>
                            <Addon AddonType="AddonType.Body">
                                <NumericEdit TValue="decimal?" />
                            </Addon>
                            <Addon AddonType="AddonType.End">
                                <AddonLabel>hours</AddonLabel>
                            </Addon>
                            <Addon AddonType="AddonType.End">
                                <Button Color="Color.Primary">
                                    <Icon Name="IconName.ChevronRight" />
                                </Button>
                            </Addon>
                        </Addons>
                    </FieldBody>
                </Field>
                <Field Horizontal>
                    <FieldLabel ColumnSize="ColumnSize.Is3">Medium</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is9">
                        <Addons Size="Size.Medium">
                            <Addon AddonType="AddonType.Start">
                                <Button Color="Color.Primary">
                                    <Icon Name="IconName.ChevronLeft" />
                                </Button>
                            </Addon>
                            <Addon AddonType="AddonType.Body">
                                <NumericEdit TValue="decimal?" />
                            </Addon>
                            <Addon AddonType="AddonType.End">
                                <AddonLabel>hours</AddonLabel>
                            </Addon>
                            <Addon AddonType="AddonType.End">
                                <Button Color="Color.Primary">
                                    <Icon Name="IconName.ChevronRight" />
                                </Button>
                            </Addon>
                        </Addons>
                    </FieldBody>
                </Field>
                <Field Horizontal>
                    <FieldLabel ColumnSize="ColumnSize.Is3">Large</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is9">
                        <Addons Size="Size.Large">
                            <Addon AddonType="AddonType.Start">
                                <Button Color="Color.Primary">
                                    <Icon Name="IconName.ChevronLeft" />
                                </Button>
                            </Addon>
                            <Addon AddonType="AddonType.Body">
                                <NumericEdit TValue="decimal?" />
                            </Addon>
                            <Addon AddonType="AddonType.End">
                                <AddonLabel>hours</AddonLabel>
                            </Addon>
                            <Addon AddonType="AddonType.End">
                                <Button Color="Color.Primary">
                                    <Icon Name="IconName.ChevronRight" />
                                </Button>
                            </Addon>
                        </Addons>
                    </FieldBody>
                </Field>
                <Field Horizontal>
                    <FieldLabel ColumnSize="ColumnSize.Is3">Extra Large</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is9">
                        <Addons Size="Size.ExtraLarge">
                            <Addon AddonType="AddonType.Start">
                                <Button Color="Color.Primary">
                                    <Icon Name="IconName.ChevronLeft" />
                                </Button>
                            </Addon>
                            <Addon AddonType="AddonType.Body">
                                <NumericEdit TValue="decimal?" />
                            </Addon>
                            <Addon AddonType="AddonType.End">
                                <AddonLabel>hours</AddonLabel>
                            </Addon>
                            <Addon AddonType="AddonType.End">
                                <Button Color="Color.Primary">
                                    <Icon Name="IconName.ChevronRight" />
                                </Button>
                            </Addon>
                        </Addons>
                    </FieldBody>
                </Field>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.IsHalf">
        <Card Margin="Margin.Is4.FromTop">
            <CardHeader>
                <CardTitle>Addons sizes with TextEdit</CardTitle>
            </CardHeader>
            <CardBody>
                <Field Horizontal>
                    <FieldLabel ColumnSize="ColumnSize.Is3">Extra Small</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is9">
                        <Addons Size="Size.ExtraSmall">
                            <Addon AddonType="AddonType.Start">
                                <Button Color="Color.Primary">
                                    <Icon Name="IconName.ChevronLeft" />
                                </Button>
                            </Addon>
                            <Addon AddonType="AddonType.Body">
                                <TextEdit />
                            </Addon>
                            <Addon AddonType="AddonType.End">
                                <AddonLabel>hours</AddonLabel>
                            </Addon>
                            <Addon AddonType="AddonType.End">
                                <Button Color="Color.Primary">
                                    <Icon Name="IconName.ChevronRight" />
                                </Button>
                            </Addon>
                        </Addons>
                    </FieldBody>
                </Field>
                <Field Horizontal>
                    <FieldLabel ColumnSize="ColumnSize.Is3">Small</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is9">
                        <Addons Size="Size.Small">
                            <Addon AddonType="AddonType.Start">
                                <Button Color="Color.Primary">
                                    <Icon Name="IconName.ChevronLeft" />
                                </Button>
                            </Addon>
                            <Addon AddonType="AddonType.Body">
                                <TextEdit />
                            </Addon>
                            <Addon AddonType="AddonType.End">
                                <AddonLabel>hours</AddonLabel>
                            </Addon>
                            <Addon AddonType="AddonType.End">
                                <Button Color="Color.Primary">
                                    <Icon Name="IconName.ChevronRight" />
                                </Button>
                            </Addon>
                        </Addons>
                    </FieldBody>
                </Field>
                <Field Horizontal>
                    <FieldLabel ColumnSize="ColumnSize.Is3">Normal</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is9">
                        <Addons>
                            <Addon AddonType="AddonType.Start">
                                <Button Color="Color.Primary">
                                    <Icon Name="IconName.ChevronLeft" />
                                </Button>
                            </Addon>
                            <Addon AddonType="AddonType.Body">
                                <TextEdit />
                            </Addon>
                            <Addon AddonType="AddonType.End">
                                <AddonLabel>hours</AddonLabel>
                            </Addon>
                            <Addon AddonType="AddonType.End">
                                <Button Color="Color.Primary">
                                    <Icon Name="IconName.ChevronRight" />
                                </Button>
                            </Addon>
                        </Addons>
                    </FieldBody>
                </Field>
                <Field Horizontal>
                    <FieldLabel ColumnSize="ColumnSize.Is3">Medium</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is9">
                        <Addons Size="Size.Medium">
                            <Addon AddonType="AddonType.Start">
                                <Button Color="Color.Primary">
                                    <Icon Name="IconName.ChevronLeft" />
                                </Button>
                            </Addon>
                            <Addon AddonType="AddonType.Body">
                                <TextEdit />
                            </Addon>
                            <Addon AddonType="AddonType.End">
                                <AddonLabel>hours</AddonLabel>
                            </Addon>
                            <Addon AddonType="AddonType.End">
                                <Button Color="Color.Primary">
                                    <Icon Name="IconName.ChevronRight" />
                                </Button>
                            </Addon>
                        </Addons>
                    </FieldBody>
                </Field>
                <Field Horizontal>
                    <FieldLabel ColumnSize="ColumnSize.Is3">Large</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is9">
                        <Addons Size="Size.Large">
                            <Addon AddonType="AddonType.Start">
                                <Button Color="Color.Primary">
                                    <Icon Name="IconName.ChevronLeft" />
                                </Button>
                            </Addon>
                            <Addon AddonType="AddonType.Body">
                                <TextEdit />
                            </Addon>
                            <Addon AddonType="AddonType.End">
                                <AddonLabel>hours</AddonLabel>
                            </Addon>
                            <Addon AddonType="AddonType.End">
                                <Button Color="Color.Primary">
                                    <Icon Name="IconName.ChevronRight" />
                                </Button>
                            </Addon>
                        </Addons>
                    </FieldBody>
                </Field>
                <Field Horizontal>
                    <FieldLabel ColumnSize="ColumnSize.Is3">Extra Large</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is9">
                        <Addons Size="Size.ExtraLarge">
                            <Addon AddonType="AddonType.Start">
                                <Button Color="Color.Primary">
                                    <Icon Name="IconName.ChevronLeft" />
                                </Button>
                            </Addon>
                            <Addon AddonType="AddonType.Body">
                                <TextEdit />
                            </Addon>
                            <Addon AddonType="AddonType.End">
                                <AddonLabel>hours</AddonLabel>
                            </Addon>
                            <Addon AddonType="AddonType.End">
                                <Button Color="Color.Primary">
                                    <Icon Name="IconName.ChevronRight" />
                                </Button>
                            </Addon>
                        </Addons>
                    </FieldBody>
                </Field>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column ColumnSize="ColumnSize.IsHalf">
        <Card Margin="Margin.Is4.FromTop">
            <CardHeader>
                <CardTitle>Addons sizes with Select</CardTitle>
            </CardHeader>
            <CardBody>
                <Field Horizontal>
                    <FieldLabel ColumnSize="ColumnSize.Is3">Extra Small</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is9">
                        <Addons Size="Size.ExtraSmall">
                            <Addon AddonType="AddonType.Start">
                                <Button Color="Color.Primary">
                                    <Icon Name="IconName.ChevronLeft" />
                                </Button>
                            </Addon>
                            <Addon AddonType="AddonType.Body">
                                <Select TValue="string"></Select>
                            </Addon>
                            <Addon AddonType="AddonType.End">
                                <AddonLabel>hours</AddonLabel>
                            </Addon>
                            <Addon AddonType="AddonType.End">
                                <Button Color="Color.Primary">
                                    <Icon Name="IconName.ChevronRight" />
                                </Button>
                            </Addon>
                        </Addons>
                    </FieldBody>
                </Field>
                <Field Horizontal>
                    <FieldLabel ColumnSize="ColumnSize.Is3">Small</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is9">
                        <Addons Size="Size.Small">
                            <Addon AddonType="AddonType.Start">
                                <Button Color="Color.Primary">
                                    <Icon Name="IconName.ChevronLeft" />
                                </Button>
                            </Addon>
                            <Addon AddonType="AddonType.Body">
                                <Select TValue="string"></Select>
                            </Addon>
                            <Addon AddonType="AddonType.End">
                                <AddonLabel>hours</AddonLabel>
                            </Addon>
                            <Addon AddonType="AddonType.End">
                                <Button Color="Color.Primary">
                                    <Icon Name="IconName.ChevronRight" />
                                </Button>
                            </Addon>
                        </Addons>
                    </FieldBody>
                </Field>
                <Field Horizontal>
                    <FieldLabel ColumnSize="ColumnSize.Is3">Normal</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is9">
                        <Addons>
                            <Addon AddonType="AddonType.Start">
                                <Button Color="Color.Primary">
                                    <Icon Name="IconName.ChevronLeft" />
                                </Button>
                            </Addon>
                            <Addon AddonType="AddonType.Body">
                                <Select TValue="string"></Select>
                            </Addon>
                            <Addon AddonType="AddonType.End">
                                <AddonLabel>hours</AddonLabel>
                            </Addon>
                            <Addon AddonType="AddonType.End">
                                <Button Color="Color.Primary">
                                    <Icon Name="IconName.ChevronRight" />
                                </Button>
                            </Addon>
                        </Addons>
                    </FieldBody>
                </Field>
                <Field Horizontal>
                    <FieldLabel ColumnSize="ColumnSize.Is3">Medium</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is9">
                        <Addons Size="Size.Medium">
                            <Addon AddonType="AddonType.Start">
                                <Button Color="Color.Primary">
                                    <Icon Name="IconName.ChevronLeft" />
                                </Button>
                            </Addon>
                            <Addon AddonType="AddonType.Body">
                                <Select TValue="string"></Select>
                            </Addon>
                            <Addon AddonType="AddonType.End">
                                <AddonLabel>hours</AddonLabel>
                            </Addon>
                            <Addon AddonType="AddonType.End">
                                <Button Color="Color.Primary">
                                    <Icon Name="IconName.ChevronRight" />
                                </Button>
                            </Addon>
                        </Addons>
                    </FieldBody>
                </Field>
                <Field Horizontal>
                    <FieldLabel ColumnSize="ColumnSize.Is3">Large</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is9">
                        <Addons Size="Size.Large">
                            <Addon AddonType="AddonType.Start">
                                <Button Color="Color.Primary">
                                    <Icon Name="IconName.ChevronLeft" />
                                </Button>
                            </Addon>
                            <Addon AddonType="AddonType.Body">
                                <Select TValue="string"></Select>
                            </Addon>
                            <Addon AddonType="AddonType.End">
                                <AddonLabel>hours</AddonLabel>
                            </Addon>
                            <Addon AddonType="AddonType.End">
                                <Button Color="Color.Primary">
                                    <Icon Name="IconName.ChevronRight" />
                                </Button>
                            </Addon>
                        </Addons>
                    </FieldBody>
                </Field>
                <Field Horizontal>
                    <FieldLabel ColumnSize="ColumnSize.Is3">Extra Large</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is9">
                        <Addons Size="Size.ExtraLarge">
                            <Addon AddonType="AddonType.Start">
                                <Button Color="Color.Primary">
                                    <Icon Name="IconName.ChevronLeft" />
                                </Button>
                            </Addon>
                            <Addon AddonType="AddonType.Body">
                                <Select TValue="string"></Select>
                            </Addon>
                            <Addon AddonType="AddonType.End">
                                <AddonLabel>hours</AddonLabel>
                            </Addon>
                            <Addon AddonType="AddonType.End">
                                <Button Color="Color.Primary">
                                    <Icon Name="IconName.ChevronRight" />
                                </Button>
                            </Addon>
                        </Addons>
                    </FieldBody>
                </Field>
            </CardBody>
        </Card>
    </Column>
</Row>